import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import {
  NavBar,
  Toast,
  Form,
  Button,
  InputNumber,
  Input,
  TextArea,
} from "@nutui/nutui-react";
import { Share, ArrowLeft } from "@nutui/icons-react";
import axios from "axios";
import { DatePicker, Space } from 'antd';
const onChange = (date, dateString) => {
  console.log(date, dateString);
};

export default function AddTravel() {
  const navigate = useNavigate();
  const [addfrom, setAddfrom] = useState({
    name: "",
    city: "",
    description: "",
    startDate: "",
    endDate: "",
    tool:"",
  });
  const handlename=(e)=>{
    setAddfrom({...addfrom, name: e });
  }
  const handlecity=(e)=>{
    setAddfrom({...addfrom, city: e });
  }
  const handlestartDate=(e)=>{
    setAddfrom({...addfrom, startDate: e });
  }
  const handleendDate=(e)=>{
    setAddfrom({...addfrom, endDate: e });
  }
  const handledescription=(e)=>{
    setAddfrom({...addfrom, description: e });
  }
  const handletool=(e)=>{
    setAddfrom({...addfrom, tool: e });
  }




 


  const addTravels = async () => {
    const res = await axios.post("http://127.0.0.1:3000/traveladd", addfrom);
    if (res.data.code === 200) {
      alert("添加成功");
      navigate("/shou/travel");
    } else {
      alert("添加失败");
    }
  };
  const Toast = () => {
    navigate("/shou/travel");
  };

  return (
    <div>
      <NavBar
        back={
          <>
            <ArrowLeft />
          </>
        }
        right={
          <span className="flex-center" onClick={(e) => Toast.show("icon")}>
            <Share />
          </span>
        }
        onBackClick={() => Toast("/shou/travel")}
      ></NavBar>
      <span style={{ width: "10px", height: "10px", background: "blue" }}>
        &nbsp;
      </span>
      <span style={{ fontSize: "15px" }}>创建您的旅行计划</span>
      <div>
        <Form
          labelPosition="right"
          footer={
            <>
              <Button
                nativeType="submit"
                onClick={addTravels}
                block
                type="primary"
              >
                提交
              </Button>
            </>
          }
        >
          <Form.Item
            align="center"
            required
            label="计划名称"
            name="name"
            rules={[{ required: true, message: "请输入计划名称" }]}
          >
            <Input
              className="nut-input-text"
              placeholder="请输入计划名称"
              type="text"
              value={addfrom.name}
              onChange={(e)=>handlename(e)}
            />
          </Form.Item>
          <Form.Item
            label="旅行地点"
            name="city"
            rules={[{ required: true, message: "请输入旅行地点" }]}
          >
            <TextArea placeholder="请输入旅行地点" maxLength={100} value={addfrom.city}
            onChange={(e)=>handlecity(e)}
            />
          </Form.Item>
          <Form.Item
            label="出行时间"
            name="startDate"
           
          >
            <Space direction="vertical">
            <DatePicker onChange={(e)=>handlestartDate(e)} value={addfrom.startDate} />

             </Space>
     

          </Form.Item>
          <Form.Item
            label="出行结束时间"
            name="endDate"
        
          >
            
            <Space direction="vertical">
            <DatePicker onChange={(e)=>handleendDate(e)} value={addfrom.endDate} />

             </Space>
          </Form.Item>
          <Form.Item
            label="出行工具"
            name="tool"
            rules={[{ required: true, message: "请输入出行工具" }]}
          >
            <TextArea placeholder="请输入出行工具" maxLength={100} value={addfrom.tool}   onChange={(e)=>handletool(e)}/>
          </Form.Item>
          <Form.Item
            label="行程备注"
            name="description"
            rules={[{ required: true, message: "请输入行程备注" }]}
          >
            <TextArea placeholder="请输入行程备注" maxLength={100} value={addfrom.description}    onChange={(e)=>handledescription(e)}/>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
